<template>
  <div class="col-md-3">
    <div class="card mb-4">
      <img v-if="isValidImage" class="file-thumb" :src="file.url" />
      <div v-else class="card-body text-center py-5">
        <component :is="useIconFileType" height="4em" width="4em" />
      </div>
      <div class="card-footer">
        <div class="d-flex align-items-center">
          <component :is="useIconFileType" />
          <span class="file-name">{{ file.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { iconFileType } from '../../composable/icon-file-type'

const isValidImage = computed(() => {
  const imageMimeTypes = ['image/jpeg', 'image/jpg', 'image/png']
  return imageMimeTypes.includes(props.file.mimeType) && !!props.file.mimeType
})

const useIconFileType = computed(() => {
  return iconFileType(props.file.mimeType)
})

const props = defineProps({
  file: {
    type: Object,
    required: true,
  },
})
</script>

<style></style>
